<template>
    <div>
      <br />
      <div class="ribbon">
        <span class="ribbon3">
          <span class="hcqFont hcqStyle1"
            ><i class="el-icon-news" />最新上映</span
          >
        </span>
      </div>
      <!-- 走马灯轮播图 -->
      <template>
        <el-carousel trigger="click" height="400px" style="width: 1000px">
          <el-carousel-item v-for="movie in movieList" :key="movie.id">
            <el-image style="height: 100%" :src="movie.image"></el-image>
          </el-carousel-item>
        </el-carousel>
      </template>
  
      <!-- 分割线 -->
      <el-divider class="movieDivider" content-position="left">
        <span class="el-icon-video-camera"> 视频点播</span>
      </el-divider>
      <br />
  
      <!-- 电影卡片 -->
      <el-row style="margin-left: 50px">
        <el-col
          :span="3"
          v-for="(movie, index) in movieList"
          :key="movie.id"
          :offset="index > 0 ? 1 : 0"
        >
          <el-card :body-style="{ padding: '0px' }" style="margin-bottom: 20px">
            <div class="cardMovie">
              <router-link target="_blank" :to="{path: '/moviePlayer', query:{id: movie.id}}">
                <img :src="movie.image" class="image" />
              </router-link>
            </div>
            <div style="padding: 4px">
              <span class="movieName">{{ movie.name }}</span>
              <div class="bottom clearfix">
                <p class="time">上映时间</p>
                <time class="time">{{ movie.createTime }}</time>
              </div>
  
              <el-popover
                placement="bottom-start"
                :title="movie.name"
                width="200"
                trigger="hover"
                :content="'💃主演 \n'+movie.actor">
                <el-button size="small" slot="reference" class="el-icon-discount"> 查看详情</el-button>
              </el-popover>
            </div>
          </el-card>
  
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  import api from "@/api/movieData/movieData.js";
  
  export default {
    data() {
      return {
        movieList: [],
        searchMovieData: {
          pageNum: 1,
          pageSize: 11,
          total: 11,
          cid: 0,
        },
      };
    },
    created() {
      this.fetchData();
    },
    methods: {
      //查询影片数据
      fetchData() {
        api.getNewMovieList(this.searchMovieData).then((res) => {
          this.movieList = res.data.data.rows;
          console.log(this.movieList);
        });
      },
    },
  };
  </script>
  
  <style>
  
  .el-popover{
    white-space: pre-wrap;
  }
  
  .el-card:hover {
    margin-top: -10px;
    padding-bottom: 10px;
  }
  
  .el-divider__text.is-left {
    left: 150px;
    height: 35px;
  }
  .el-divider__text {
    background: rgb(190, 246, 170);
  }
  .movieDivider {
    width: 85%;
    left: 5%;
    text-align: center;
  }
  .movieDivider span {
    font-size: 20px;
    line-height: 35px;
  }
  
  .movieName {
    display: block;
    /* //超出一行省略号 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .time {
    font-size: 13px;
    color: #999;
  }
  
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }
  
  .button {
    padding: 0;
    float: right;
  }
  
  .cardMovie {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .image {
    height: 200px;
    display: block;
  }
  
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  
  .clearfix:after {
    clear: both;
  }
  
  .ribbon {
    position: absolute;
    z-index: 9999;
    top: 70px;
    left: 260px;
  }
  .ribbon3 {
    display: inline-block;
    position: absolute;
    width: 200px;
    height: 50px;
    line-height: 50px;
    padding-left: 15px;
    /* background: #ff404e; */
    background: linear-gradient(to right, #ff404e, rgb(246, 194, 170, 70%));
    opacity: 0.9;
    left: -8px;
    top: 20px;
  }
  .ribbon3:before,
  .ribbon3:after {
    content: "";
    position: absolute;
  }
  .ribbon3:before {
    height: 0;
    width: 0;
    border-bottom: 8px solid #ff404e;
    border-left: 8px solid transparent;
    top: -8px;
    left: 0;
  }
  .ribbon3:after {
    height: 0;
    width: 1px;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 15px solid rgb(246, 194, 170, 70%);
    right: -15px;
  }
  
  .hcqFont {
    position: relative;
    letter-spacing: 8px;
    font-size: 25px;
    font-weight: normal;
    margin: 0 auto;
  }
  .hcqFont:before,
  .hcqFont:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .hcqStyle1 {
    color: #ffc75a;
    text-shadow: 0 0 1px currentColor, /*highlight*/-1px -1px 1px #fcd518,
      0 -1px 1px #fcd518, 1px -1px 1px #fcd518,
      /*light shadow*/ 1px 1px 1px hsl(184, 80%, 10%),
      0 1px 1px hsl(184, 80%, 10%), -1px 1px 1px hsl(184, 80%, 10%),
      /*outline*/-2px -2px 1px hsl(184, 80%, 15%),
      -1px -2px 1px hsl(184, 80%, 15%), 0 -2px 1px hsl(184, 80%, 15%),
      1px -2px 1px hsl(184, 80%, 15%), 2px -2px 1px hsl(184, 80%, 15%),
      2px -1px 1px hsl(184, 80%, 15%), 2px 0 1px hsl(184, 80%, 15%),
      2px 1px 1px hsl(184, 80%, 15%), -2px 0 1px hsl(184, 80%, 15%),
      -2px -1px 1px hsl(184, 80%, 15%), -2px 1px 1px hsl(184, 80%, 15%),
      /*dark shadow*/ 2px 2px 2px hsl(184, 80%, 5%), 1px 2px 2px hsl(184, 80%, 5%),
      0 2px 2px hsl(184, 80%, 5%), -1px 2px 2px hsl(184, 80%, 5%),
      -2px 2px 2px hsl(184, 80%, 5%);
  }
  </style>